<template>
	<div>
		<!-- 卡片 -->
		<el-card class="box-card">

			<!-- el-icon-s-data -->

			<i class="el-icon-s-data"></i>
			<i style="margin-left: 20px;">商户信息</i>
			<el-button type="primary" class="fanhui" @click="fanhui">返回</el-button>
			<hr />
			<!-- table 用户详情信息 -->
			<el-descriptions class="margin-top" :column="2" :size="size" border>

				<el-descriptions-item label="商家名称:">


					<div>{{XQ.name}}</div>
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">

						营业执照号码:
					</template>
					{{XQ.license}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">

						负责人:
					</template>
					{{XQ.director}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">

						负责人手机号:
					</template>
					{{XQ.directorPhone}}
					<el-tag size="small">学校</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						身份证号码:
					</template>
					{{XQ.idcard}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">

						经营区域:
					</template>
					{{XQ.area}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">

						注册时间:
					</template>
					{{XQ.createtime}}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态：">
					<template>
						<div v-if="XQ.state==0">已拒绝</div>
						<div v-else-if="XQ.state==1">已通过</div>
						<div v-if="XQ.state==2">未审核</div>
					</template>
					<!-- {{XQ.state}} -->
				</el-descriptions-item>

				<!-- 详细地址 商家介绍 -->
				<el-descriptions-item :span="2">
					<template slot="label">
						联系地址:
					</template>
					{{XQ.address}}
				</el-descriptions-item>

				<el-descriptions-item :span="2">
					<template slot="label">

						商家介绍:
					</template>
					{{XQ.content}}
				</el-descriptions-item>
			</el-descriptions>
			<!-- 商家照片 -->
			<div>&nbsp;</div>
			<el-descriptions class="margin-top" title="商家照片" :column="4" direction="vertical">
				<el-descriptions-item label="门面照片">



					<el-image style="width: 100px; height: 100px"
						src="'http://localhost:8888/selectMer?filename='+this.img[0]" :fit=" 'contain' "></el-image>

				</el-descriptions-item>
				<el-descriptions-item label="营业执照">
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8888/selectMer?filename='+this.img[1]" :fit=" 'contain' "></el-image>

				</el-descriptions-item>
				<el-descriptions-item label="身份证正面照片">
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8888/selectMer?filename='+this.img[2]" :fit=" 'contain' "></el-image>

				</el-descriptions-item>
				<el-descriptions-item label="身份证反面照片">
					<el-image style="width: 100px; height: 100px"
						:src="'http://localhost:8888/selectMer?filename='+this.img[3]" :fit=" 'contain' "></el-image>

				</el-descriptions-item>
			</el-descriptions>
		</el-card>
	</div>
</template>

<script>
	import {
		Select
	} from 'element-ui';
	export default {
		data() {
			return {
				size: '',
				// 由兄弟组件穿过来的id
				id: '',
				img: [],
				XQ: {
					name: '',
					license: '',
					director: '',
					directorPhone: '',
					idcard: '',
					area: '',
					createtime: '',
					state: '',
					address: '',
					content: '',


				},

				//内容样式
				contentStyle: {
					'text-align': 'center',
				},
				//label样式
				labelStyle: {
					'width': '192px'
				}
			}
		},
		// 页面加载的钩子函数
		mounted() {
			this.id = this.$route.query.id;
			this.selectt();
			this.SelectPhone();

		},
		methods: {
			fanhui() {
				this.$router.push('/merchantmanage');
				return;
			},
			async selectt() {
				let res = await this.$http.get('http://localhost:8888/selectDate?id=' + this.id);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				} else {
					this.XQ.name = res.data.data.name;
					this.XQ.license = res.data.data.license;
					this.XQ.director = res.data.data.director;
					this.XQ.directorPhone = res.data.data.directorPhone;
					this.XQ.idcard = res.data.data.idcard;
					this.XQ.area = res.data.data.area;
					this.XQ.createtime = res.data.data.createtime;
					this.XQ.state = res.data.data.state;
					this.XQ.address = res.data.data.address;
					this.XQ.content = res.data.data.content;
				}
			},
			async SelectPhone() {
				let res = await this.$http.get('http://localhost:8888/selectMer?mid=' + this.id)
				if (res.code == 400) {
					this.$message.error(res.msg)
					return;
				} else {
					this.img = res.data.data;
					return;

				}
			}

		}

	}
</script>

<style scoped>
	/* 卡片样式 */

	.box-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}

	/* 返回按钮 */
	.fanhui {
		float: right;

	}

	hr {
		margin-top: 30px;
	}

	/* form表单样式 */
	/* el-input {
		width: 300px;
	} */

	/* table */
	.table-left-header .el-table__header-wrapper {
		flex-direction: row-reverse;
	}

	.table-left-header .el-table__header {
		width: auto;
	}

	.table-left-header .el-table__body-wrapper .el-table__row {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
</style>